<template>
  <a class="column is-3 guide-button" :href="url" target="_blank">
            <div class="card has-text-dark" style="border-radius: 5px; margin: 0.5rem; padding: 0.5rem;">
              <div>
                <div class="columns">
                  <div class="column is-2">
                    <figure class="image is-32x32">
                      <img class="is-rounded" :src="image">
                    </figure>
                  </div>
                  <div class="column is-1"></div>
                  <div class="column is-9">
                    <div class="is-size-5 has-text-weight-bold">
                      {{name}}
                    </div>
                  </div>
                </div>
              </div>
              <div class="is-size-6" style="margin-top: 0.5rem;"> {{intro}} </div>
            </div>
        </a>
</template>

<script>
  import API, { eos, currentEOSAccount } from '@/util/api';
  import swal from 'sweetalert';
  import { mapActions, mapState } from 'vuex';

  export default {
    name: 'guide_card',
    props: ['image', 'url', 'name', 'intro'],

    data() {
      return {}
    },

    computed: {
    },

    methods: {
    },

    created() {
    },

    watch: {},
  };
</script>
<style scoped>
</style>
